<template>
  <view :style="themeStore.themeStyle" class="index" @touchmove="popupShow = true" @touchend="popupShow = false">
    <!-- 轮播图 -->
    <up-swiper height="190" :list="list1" interval="5000" :indicator="false" :autoplay="true" indicatorMode="dot"></up-swiper>
    <view class="main-content">
      <!-- 用户信息 -->
      <view class="user-info card flex col-center">
        <up-avatar :src="userInfo.card_face_url"></up-avatar>
        <view class="m-l-10">
          <view class="info-name m-b-8">{{ userInfo.card_name }}</view>
          <view class="info-phone">{{ userInfo.card_phone }}</view>
        </view>
      </view>
      <!-- 菜单 -->
      <view class="menu card m-t-20">
        <view class="flex flex-col">
          <view class="menu-lists">
            <view class="swiper-card">
              <swiper
                class="swiper-wrapper"
                :style="{ height: 140 + 'px' }"
                :indicator-dots="false"
                :autoplay="false"
                @change="changeSwiper"
              >
                <swiper-item v-for="(row, i) in menuList" :key="i">
                  <view class="flex flex-wrap">
                    <view
                      v-for="(item, index) in row"
                      @click="gotoCardPage(item)"
                      class="menu-item flex flex-col col-center m-b-20"
                      :key="index"
                    >
                      <view>
                        <up-image width="60rpx" height="60rpx" :src="userInfo.card_face_url"></up-image>
                      </view>
                      <view class="m-t-16 xs">{{ item.name }}</view>
                      <!-- <view class="menu-item-point"></view> -->
                    </view>
                  </view>
                </swiper-item>
              </swiper>
            </view>
            <!-- 指示器 -->
            <view class="swiper-dot-wrapper flex flex-center">
              <view v-for="(j, k) in menuList" :key="k" class="swiper-dot" :class="currentSwiper === k ? 'active' : ''"></view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { getApiPermission } from '@/api/app'
import { menuListMockData } from './mockData'
import { route } from 'uview-plus'
let menuList = reactive(menuListMockData as any)
let currentSwiper = ref(0)
let popupShow = ref(false)
let userInfo = reactive({
  card_face_url: 'https://packer-data-files.oss-cn-shenzhen.aliyuncs.com/mapp_static/images/avatar.png',
  card_name: '赵传福',
  card_phone: '18814325766'
})
const list1 = reactive([
  'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
  'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
  'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'
])
// 菜单栏高度
const menuHeight = () => {
  let height = uni.upx2px(268)
  return height
}
const changeSwiper = (e: any) => {
  currentSwiper.value = e.detail.current
}

const getPermissionList = () => {
  const params = {
    com_id: 6,
    id: 6,
    person_id: '1101'
  }
  getApiPermission(params).then((res: any) => {
    console.log(res)
  })
}
const gotoCardPage = (item: any) => {
  let url = ''
  switch (item.type) {
    case 'recharge':
      url = '/pages_order_delivery/list/list'
      break

    default:
      break
  }
  route({
    url,
    params: {
      name: '测试值'
    }
  })
}
onMounted(() => {
  getPermissionList()
})
import { useThemeStore } from '@/store/modules/theme'
const themeStore = useThemeStore()
onShow(() => {
  themeStore.initTheme()
})
</script>

<style lang="scss" scoped>
.index {
  padding-bottom: 40rpx;
  // 中间内容
  .main-content {
    padding: 0 40rpx;
    margin-top: -76rpx;
    margin-bottom: 60rpx;
    position: relative;
    z-index: 1;
    // 用户信息
    .user-info {
      padding: 30rpx;
      position: relative;
      width: 100%;
      border-radius: 20rpx;
      background-color: #ffffff;
    }
    // 菜单信息
    .menu {
      background: linear-gradient(135deg, #11e69e 0%, #093028 100%);
      background: linear-gradient(45deg, #11e69e 0%, #2bc0e4 30%, #2cd879 70%, #33c425 100%);
      padding: 30rpx;
      border-radius: 10rpx;
      .menu-lists {
        .swiper-card {
          background: #ffffff;
          border-radius: 20rpx;
          padding: 30rpx 0;
          .card-title {
            font-size: $font-size-md;
            font-weight: 500;
            color: $color-text-black;
          }
          .swiper-wrapper {
            height: 245rpx;
          }
        }
        .menu-item {
          width: 20%;
          position: relative;
          .menu-item-point {
            position: absolute;
            top: 0;
            right: 22rpx;
            width: 16rpx;
            height: 16rpx;
            border-radius: 10rpx;
            background-color: #11e69e;
          }
        }
        .swiper-dot-wrapper {
          border-radius: 200rpx;
          position: relative;
          top: -20rpx;
          .swiper-dot {
            width: 15rpx;
            height: 4rpx;
            border-radius: 200rpx;
            margin: 0 4rpx;
            transition: transform 0.3s;
            background-color: #e3e3e3;
            &.active {
              width: 20rpx;
              background-color: #11e69e;
            }
          }
        }
      }
    }
  }
}
</style>
